<template>
	<div style="margin-top: 8vh; width: 90vw;margin-left: 5vw;height: 5vh;">
	    <div style="width: 90vw;" >
			<input  @blur="userBtn" v-model="username"  class="quickly_input" type="" name="" id="" value="" placeholder="请输入手机号"/>
		</div>
		<!-- 验证码 -->
		<div style="width: 90vw;display: flex;margin-top: 4vh;">
			<div style="width: 50vw;">
				<input class="quickly_yzm" type="" name="" id="" value="" placeholder="请输入验证码"/>
			</div>
			<div style="width: 40vw;padding-left: 5vw; height: 4vh;line-height: 4vh;padding-top: 1vh;">
				<div class="yzmDiv">获取验证码</div>
			</div>
		</div>
		<!-- 登录按钮 -->
		<div class="quickly_loginBtn" @click="loginBtn">登录</div>
		<!-- 切换账号 -->
		<div class="quickly_qh">
			<div>切换账号</div>
			<div>新用户注册</div>
		</div>
		<!-- 其他登录 -->
		<div style="width: 90vw;margin-top: 10vh;font-size: 1rem;color: #999;">其他账号登录</div>
		<!-- 图标 -->
		<div style="width: 90vw;display: flex;justify-content: space-around;">
			<div>
				<img src="../../../public/QQ图标.png" style="width: 7vw;height: 4vh;">
			</div>
			<div>
				<img src="../../../public/微信图标.png" style="width: 7vw;height: 4vh;">
			</div>
			<div>
				<img src="../../../public/微博图标.png" style="width: 7vw;height: 4vh;">
			</div>
		</div>
		<!-- 遇到问题需要帮助 -->
		<div style="font-size: 0.5rem;margin-top: 2vh;">登录遇到问题？<span style="color: blue;">需要帮助？</span> </div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				username:''
			}
		},
		created() {
		
		},
		methods:{
			loginBtn(){
				this.$store.dispatch("user/Get_Login",this.username).then(e=>{
					// console.log(e)
					this.list=e.data.data
					localStorage.setItem('userInfo',JSON.stringify(this.list) )
					this.$router.push('/mine')
				})
				
			},
			
			userBtn(){
				console.log(this.username)
			}
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.quickly_input {
		width: 88vw;
		border: none;
		border-bottom: solid 2px #ccc;
	}
	input::-webkit-input-placeholder{
		color: #ccc;
		font-size: 0.8rem;
	}
	.quickly_yzm{
		width: 45vw;
		border: none;
		border-bottom: solid 2px #ccc;
	}
	.yzmDiv{
		width: 20vw;
		height: 4vh;
		border: solid 2px #000;
		font-size: 1rem;
		margin-left: 5vw;
	}
	.quickly_loginBtn{
		color: #fff;
		width: 80vw;
		margin-left: 2vw;
		text-align: center;
		height: 5vh;
		margin-top: 8vh;
		background-color: #222222;
	    border-radius: 5px;
	}
	.quickly_qh{
		width: 80vw;
		margin-left: 2vw;
		display: flex;

		
	}
	.quickly_qh :nth-child(1){
		font-size: 0.5rem;
		width: 40vw;
		text-align: left;
		
	}
	.quickly_qh :nth-child(2){
		font-size: 0.5rem;
		width: 40vw;
		text-align: right;
		
	}
</style>
